<template>
    <div class="wrap">
       <div>
            <div style="margin-bottom:20px;font-weight:bold;font-size:12px;text-align:center;padding-top:20px;">
                点击下面按钮一键开锁
            </div>
            <div class="cssBox">
        <div class="borderRadius">
            <div class="lfRaidus">
                <div class="ctRaidus"></div>
            </div>
            <div class="rtRaidus">
                <div class="ctRaidus"></div>
                <div class="hfPoint"></div>
                <div class="rtPoint"></div>
            </div>
        </div>
        <div class="imageRadius">
            <img src="./1.png" width="100%" alt="">
        </div>
        <div class="waveRaidus">
            <img src="./1.png" width="100%" alt="">
        </div>
        <div class="pointRadius">
            <div class="open" @click="opendoor">
                开启
            </div>
            <img src="./2.png" width="100%" alt="">
        </div>
    </div>
       </div>
       
        
    </div>
</template>

<script>
import { Notify,Dialog,Toast } from 'vant';
import axios from 'axios'
import api from '../api/opendoor.js'

    export default {
        data: function () {
           return{
               cansend:true,
               timer:null,
               message:''
           }
        },
        components: {
           
        },
        created(){
           
           
        },
        mounted() {
           
        },
        methods: {
           
          opendoor(){
              if(!this.cansend){
                  Toast(this.message)
                  return
              }
              let that=this 
               Dialog.confirm({
                title: '确定开门？',
                message: '',
                })
                .then(() => {
                    Toast.loading({
                        message: '正在请求开门...',
                        duration: 0,
                        forbidClick:true
                    });
                    api.opendoor({
                        sn:that.$route.query.sn,
                            openId:openid
                    }).then(e=>{
                       
                       
                        if(e.code==200){
                            setInterval(function(){
                                api.queryIsSuccess({sn:that.$route.query.sn}).then(e=>{
                                    console.log(e)
                                }).catch(err=>{
                                    console.log(err)
                                })
                            },30000)    
                                
                        }else{
                            that.cansend=false
                            that.message=e.message
                            Toast.clear()
                        }
                        
                        
                    }).catch(err=>{
                        console.log(err)
                    })
                })
                .catch(() => {
                    // on cancel
                });

              
              
          }, 
          
          
          
          
           
          


          
         
          
         
        }
    }
</script>

<style scoped lang="scss">
@import "../common.scss";
.open{
    position:absolute;
    height:100%;
    width:100%;
    font-size:px2rem(16px);
    font-weight:bold;
    display:flex;
    justify-content: center;
    align-items: center;
}
.wrap{
    height:100vh;
    display:flex;
    align-items: center;
    justify-content: center;
    background:#202A38;
    color:#fff;
}
.img-wrap{
    width:50vw;
    height:50vw;
    border-radius:50%;
    background:#67C23A;
    display:flex;
    align-items: center;
    justify-content: center;
}
body{ background:#202A38}
    img{display: block;}
    .cssBox {width: px2rem(100px);height:  px2rem(100px);margin: 100px auto;background-color: #202A38;position: relative;}
    .cssBox .borderRadius {width:  px2rem(50px);height:  px2rem(50px);
        position: absolute;left: 50%;top: 50%;margin: px2rem(-25px) 0 0 px2rem(-25px);
       
               
    }
    @-webkit-keyframes rotating {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            opacity: 1;
        }
        65% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            opacity: 1;
        }
        100% {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            opacity: 0;
        }
    }
    .cssBox .borderRadius .lfRaidus {width: px2rem(50px);height: px2rem(25px);border-radius: px2rem(25px) px2rem(25px) 0 0;position: relative;
        
    }
    @-webkit-keyframes lfRaidus {
        0% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#202A38);background: -o-linear-gradient(right,red,black);
        }
        65% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#202A38);background: -o-linear-gradient(right,red,black);
        }
        100% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#202A38);background: -o-linear-gradient(right,red,black);
        }
    }
    .cssBox .borderRadius .lfRaidus .ctRaidus {width: 262px;height: 131px;background-color: #202A38;border-radius: 131px 131px 0 0;
        position: absolute;left: 50%;bottom: 0;-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);
    }
    .cssBox .borderRadius .rtRaidus {width: px2rem(50px);height: px2rem(25px);border-radius: 0 0 px2rem(25px) px2rem(25px);position: relative;
       
    }
    @-webkit-keyframes rtRaidus {
        0% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#00FFA8);background: -o-linear-gradient(right,red,black);
        }
        65% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#00FFA8);background: -o-linear-gradient(right,red,black);
        }
        100% {
            background: -moz-linear-gradient(right,red,black);background: -webkit-linear-gradient(right,#0F956F,#00FFA8);background: -o-linear-gradient(right,red,black);
        }
    }
    .cssBox .borderRadius .rtRaidus .ctRaidus {width: 262px;height: 131px;background-color: #202A38;border-radius: 0 0 131px 131px;
        position: absolute;left: 50%;top: 0;-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);
    }
    .cssBox .borderRadius .rtRaidus .hfPoint {width: 7px;height: 5px;position: absolute;left: 0px;top: -5px;border-radius: 5px 5px 0 0;background-color: #00FFA8;}
    .cssBox .borderRadius .rtRaidus .rtPoint {width: 5px;height: 5px;position: absolute;left: 10px;top: -5px;border-radius: 5px;background-color: #00FFA8;}
    .cssBox .imageRadius {margin-top: 4px;opacity: 0;width: 100%;height: 100%;
        position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
       
    }
    @-webkit-keyframes imageRadius {
        0% {
            opacity: 0;
        }
        65% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .cssBox .waveRaidus {margin-top: 4px;opacity: 0;
        position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
       
               
    }
    @-webkit-keyframes waveRaidus {
        0% {
            width: 100%;height: 100%;
            opacity: 0;
        }
        65% {
            width: 100%;height: 100%;
            opacity: 0;
        }
        66% {
            width: 100%;height: 100%;
            opacity: 0.8;
        }
        100% {
            width: 130%;height: 130%;
            opacity: 0;
        }
    }
    .cssBox .pointRadius {width: 10px;height: 10px;border-radius: 360px;background-color: #FFF;border: 1px solid transparent;
        box-sizing:border-box;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
        -webkit-animation: pointRadius 2s ease 0s infinite;
                animation: pointRadius 2s ease 0s infinite;
    }
    @-webkit-keyframes pointRadius {
        0% {width: px2rem(100px);height: px2rem(100px);border: 0;box-shadow: 0 0 0px 3px rgba(255,255,255,0.3), 0 0 0px 6px rgba(255,255,255,0.2), 0 0 0px 9px rgba(255,255,255,0.1);}
        
        100% {width: px2rem(100px);height: px2rem(100px);border: 2px solid #CCC;}
    }
  

</style>
